<template>
  <div>
    <ul class="bottomNav">
      <li v-for="(item, idx) in icons" :key="idx" @click="changeBottom(idx)">
        <img
          :src="active == idx ? item.active : item.inactive"
          alt=""
          class="navIcon"
        />
        <p>{{ item.name }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      icons: [
        {
          name: "首页",
          active: require("../assets/img/homeNow.png"),
          inactive: require("../assets/img/homeNor.png"),
          path: "/home",
        },
        {
          name: "分类",
          active: require("../assets/img/cateNow.png"),
          inactive: require("../assets/img/cateNor.png"),
          path: "/classification",
        },
        {
          name: "发现",
          active: require("../assets/img/findNow.png"),
          inactive: require("../assets/img/findNor.png"),
          path: "/find_share",
        },
        {
          name: "购物车",
          active: require("../assets/img/carNow.png"),
          inactive: require("../assets/img/carNor.png"),
          path: "/cart",
        },
        {
          name: "我的",
          active: require("../assets/img/personNow.png"),
          inactive: require("../assets/img/personNor.png"),
          path: "/myPage",
        },
      ],
    };
  },
  methods: {
    changeBottom(idx) {
      var json = {};
      if (this.icons[idx].name == "发现") {
        json.active = idx;
        json.currentTop = 0;
      } else {
        json.active = idx;
      }
      this.$router.push({
        path: this.icons[idx].path,
        query: json,
      });
    },
  },
  mounted() {
    this.active = this.$route.query.active;
  },
};
</script>
<style lang="less" scoped>
.bottomNav {
  position: fixed;
  bottom: 0;
  height: 0.83rem;
  display: flex;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
  li {
    width: 0.75rem;
    height: 0.48rem;
    display: flex;
    flex-direction: column;
    .navIcon {
      width: 0.28rem;
      height: 0.28rem;
      margin: 0 auto;
      margin-top: 0.06rem;
    }
    p {
      margin: 0 auto;
      margin-top: 0.02rem;
      font-size: 0.1rem;
    }
  }
}
</style>